<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>DataGrid Pagination - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>DataGrid Pagination Demo</h2>
<div style="margin-bottom:10px">
    <p>Click the page bar to change page number or page size.</p>
</div>
<p>
    Pagination on
    <select id="p-pos" onchange="changeP()">
        <option>bottom</option>
        <option>top</option>
        <option>both</option>
    </select>
    Style
    <select id="p-style" onchange="changeP()">
        <option>manual</option>
        <option>links</option>
    </select>
</p>

<table id="tt" class="easyui-datagrid" style="width:700px;height:250px"
       url="/api/demos"
       title="Load Data" iconCls="icon-save"
       rownumbers="true" pagination="true" data-options="method:'get'">
    <thead>
    <tr>
        <th field="itemid" width="80">Item ID</th>
    </tr>
    </thead>
</table>
<script type="text/javascript">
    function changeP(){
        var dg = $('#tt');
        dg.datagrid('loadData',[]);
        dg.datagrid({pagePosition:$('#p-pos').val()});
        dg.datagrid('getPager').pagination({
            layout:['list','sep','first','prev','sep',$('#p-style').val(),'sep','next','last','sep','refresh','info']
        });
    }
</script>
</body>
</html>